<h2>大家好，我是{{name}}</h2>
<p>我来自<strong>{{address.province}}</strong>省,
  <strong>{{address.city}}</strong>市
</p>
<button (click)="toggleSkills()">
  {{ showSkills ? "隐藏技能" : "显示技能" }}
</button>
<div *ngIf="showSkills">
  <h3>我的技能</h3>
  <ul>
    <li *ngFor="let skill of skills">
      {{skill}}
    </li>
  </ul>
  <form (submit)="addSkill(skill.value)">
    <label>添加技能</label>
    <input type="text" #skill>
  </form>
</div>

<div>
  <h2>管道 格式化</h2>
  <p>生日：{{ birthday }}</p>
  <p>生日 | date ：{{ birthday | date }}</p>
  <p>生日 | date:format ：{{ birthday | date:format }}</p>
  <button (click)="toggleFormat()">转换</button>
</div>


<div>
  <h2>幂运算</h2>
  <div>底数: <input [(ngModel)]="power"></div>
  <div>幂数: <input [(ngModel)]="factor"></div>
  <p>
    结果: {{power | exponentialStrength: factor}}
  </p>
</div>


<div>
  <h2>获取JSON</h2>

  <div *ngFor="let hero of ('assets/heroes.json' | fetch) ">
    {{hero.name}}
  </div>

  <p>Heroes as JSON:
    {{'assets/heroes.json' | fetch | json}}
  </p>
</div>
